<template>
  <div class="language-selector">
    <div class="selector-label">{{ prefixText }}</div>
    <el-dropdown class="custom-dropdown" placement="bottom-start" ref="dropdown">
      <span class="dropdown-toggle">
        {{ displayText }}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown" class="dropdown-options">
        <el-checkbox-group
          v-model="selectedLanguages"
          @change="handleLanguageChange"
          class="checkbox-group"
        >
          <el-checkbox
            v-for="language in languageOptions"
            :label="language.value"
            :key="language.label"
            class="checkbox-item"
            >{{ language.label }}</el-checkbox
          >
        </el-checkbox-group>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  props: {
    // 改为字符串类型接收单选值
    value: {
      type: String,
      default: '',
    },
    options: {
      type: Array,
      default: () => [],
    },
    prefixText: {
      type: String,
      default: "Select Language(s)",
    },
  },
  data() {
    return {
      // 用数组适配checkbox-group但只存储一个值
      selectedLanguages: this.value ? [this.value] : [],
    };
  },
  computed: {
    displayText() {
      if (this.selectedLanguages.length === 0) {
        return "please select";
      } else {
        // 只显示选中的单个选项
        const selected = this.languageOptions.find(
          opt => this.selectedLanguages.includes(opt.value)
        );
        return selected ? selected.label : "please select";
      }
    },
    languageOptions() {
      return this.options.length > 0 ? this.options : [];
    },
  },
  watch: {
    // 监听父组件传入值的变化
    value(newVal) {
      this.selectedLanguages = newVal ? [newVal] : [];
    },
  },
  methods: {
    handleLanguageChange(values) {
      // 核心单选逻辑：始终只保留最后一个选中项
      if (values.length > 0) {
        const lastValue = values[values.length - 1];
        this.selectedLanguages = [lastValue];
        this.$emit("input", lastValue);
        this.$emit("change", lastValue);
      } else {
        // 取消选择
        this.selectedLanguages = [];
        this.$emit("input", '');
        this.$emit("change", '');
      }
      // // 选择后关闭下拉框
      // this.$refs.dropdown.hide();
    },
  },
  mounted() {
    console.log("子组件接收到的 options:", this.options);
    console.log("子组件接收到的 prefixText:", this.prefixText);
  },
};
</script>

<style scoped lang="scss">
.language-selector {
  border: 1px solid #6a6969;
  border-radius: 8px;
  padding: 4px 14px;
  width: 166px;
  position: relative;
  .selector-label {
    font-size: 0.0694rem;
    font-weight: 400;
    color: #8f8f8f;
    margin-bottom: 8px;
  }

  .custom-dropdown {
    .dropdown-toggle {
      justify-content: space-between;
      display: inline-flex;
      align-items: center;
      width: 140px;

      border-radius: 4px;
      background-color: #fff;
      font-size: 0.0972rem;
      font-weight: 400;
      color: #232323;
      cursor: pointer;
      transition: border-color 0.2s;

      &:hover {
        background-color: #f5f7fa; /* 浅灰色背景，可根据需求调整 */
        color: #232323; /* 文字颜色保持不变 */
      }

      .el-icon-arrow-down {
        transition: transform 0.2s;
      }
      .el-icon--right {
        // margin-left: 76px;
      }
    }

    .dropdown-options {
      background: #fff !important;
      display: flex;
      flex-direction: column;
      min-width: 166px;
      border-radius: 4px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    }

    .checkbox-item {
      display: flex;
      flex-direction: column;
      padding: 0px 16px;
      font-size: 0.0972rem;
      color: #606266;

      &:hover {
        background-color: #f5f7fa;
      }
    }
  }

  // 下拉菜单展开状态
  .el-dropdown-menu--visible + .dropdown-toggle .el-icon-arrow-down {
    transform: rotate(180deg);
  }
}
::v-deep .el-checkbox-group {
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column !important;
  width: 166px;
  padding: 8px !important;
  position: absolute;
  left: -25px !important;
  border: 1px solid #6a6969;
  background-color: #fff !important;
  border-radius: 4px;
}
::v-deep .el-checkbox-group .el-checkbox:hover {
  background-color: #fff;
}
.language-selector .custom-dropdown .dropdown-toggle {
  background: none;
}
</style>
